# Тестирование

Этот документ описывает подходы, инструменты, а также рекомендации которые используются для тестирования библиотеки компонентов.

## Подходы тестирования

Мы используем 2 подхода тестирования:

- unit-тесты для проверки свойств и состояний компонентов. Для написания данного типа тестов используется фреймворк [jest](https://jestjs.io/),
- e2e-тесты для проверки внешнего вида компонентов и сложных сценариев. Для написания данного типа тестов используется фреймворк [playwright](https://playwright.dev/)

## Установка

Перед начал тестирования убедитесь что ваше окружение настроено и все необходимые компоненты присутствуют в системе:

- `Node ^16` для запуска скриптов
- `yarn ^1`, для установки зависимостей,
- Docker, для запуска e2e тестов и создания скриншотов компонентов

Скачайте Docker образ для Playwright для запуска e2e тестов. Используйте туже версию образа, что и версия `@playwright/test` в `package.json`:

```
docker pull mcr.microsoft.com/playwright:v1.23.2-focal
```

После успешного скачивания образа, запустите контейнер:

```bash
// Для MacOS и Linux
docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.23.2-focal /bin/bash

// или для Windows
docker run --rm --network host -v "%cd%:/work/" -w /work/ -it mcr.microsoft.com/playwright:v1.23.2-focal /bin/bash
```

Если все прошло успешно, у вас будет запушена консоль.

Теперь необходимо установить npm-зависимости:

```
yarn
```

**Важно** установить зависимости именно из под докера, потому что playwright использует под капотом [vite](https://vitejs.dev/), который для сборки `js/ts` кода использует [esbuild](https://esbuild.github.io/). Во время установки зависимостей, устанавливается нужная версия бинарного файла от `esbuild`, которая зависит от OS.

## Структура тестов

Файловая структура пакета с тестами выглядит следующим образом:

```
packages
  ├── button
  |    ├── __tests__
  |    |    ├── Button.e2e.tsx // e2e-тесты
  |    |    └── Button.test.tsx // unit-тесты
  |    ├── src
  |    |    ├── Button.tsx
  |    |    └── ...
  |    ├── package.json
  |    └── ...
  └── ...
```

## Запуск unit-тестов

Чтобы запустить все unit-тесты, запустите следующую команду из корня проекта:

```
yarn test:unit
```

Это команда запускает jest-runner, который ищет все тесты по паттерну `*_/?(_.)+(spec|test).[jt]s?(x)` во всех пакетах. Тесты запускаются с обязательным флагом `cross-env TZ=UTC`, чтобы тесты пакеты `date-picker` запускались в одной таймзоне.

## Запуск e2e-тестов

Чтобы запустить все e2e-тесты, запустите следующую команду из корня проекта:

```
yarn test:e2e
```

Это команда запускает playwright-runner, который ищет все тесты по паттерну `?(*.)+(e2e).[jt]s?(x)` во всех пакетах.
**Важно** запускать e2e-тесты нужно из под докер контейнера, так как разные системы могут по разному рендерить шрифты и поэтому скриншоты будут отличаться.

### Обновление скриншотов для e2e-тестов

Для обновления скриншотов запустите команду внутри контейнера:

```bash
yarn test:e2e -u
```
